<template>
  <!-- 订单详情页 -->
  <div>
    <div class="back">
      <a href="#" @click="$router.go(-1)">返回</a>
    </div>
    <div class="header">
      <el-table :data="tableData" style="width: 100%; font-size: 15px">
        <el-table-column prop="id" label="订单项编号" />
        <el-table-column prop="productId" label="产品编号" />
        <el-table-column prop="product.name" label="产品" />
        <el-table-column prop="product.photo" label="产品图片">
          <template slot-scope="scope">
            <img :src="scope.row.product.photo" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价">
          <template slot-scope="scope">
            ￥<span class="price">{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="数量" />
      </el-table>
    </div>
    <div class="bottom">
      <el-card class="box-card" style="width: 20%">
        <div slot="header" class="clearfix">
          <span>订单基本信息</span>
        </div>
        <p>订单编号：{{ tableData1.id }}</p>
        <div class="total">
          订单金额：￥<span>{{ tableData1.total }}</span> 元
        </div>
        <p>下单时间：{{ tableData1.orderTime | fmtDate1 }}</p>
        <p>订单状态：{{ tableData1.status }}</p>
      </el-card>
      <el-card class="box-card" style="width: 20%">
        <div slot="header" class="clearfix">
          <span>下单者信息</span>
        </div>
        <p>下单者：{{ tableData2.realname }}</p>
        <p>下单者手机号：{{ tableData2.telephone }}</p> </el-card
      ><el-card class="box-card" style="width: 20%">
        <div slot="header" class="clearfix">
          <span>雇主信息</span>
        </div>
        <p>雇主：{{ tableData3.username }}</p>
        <p>雇主手机号：{{ tableData3.telephone }}</p>
        <p>服务地址：{{ tableData3.city }}{{ tableData3.address }}</p>
      </el-card>
    </div>
  </div>
</template>

<script>
import { tableDetailsData } from "@/api/product";
import { fmtDate1 } from "@/filters/index";
export default {
  data() {
    return {
      id: "",
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
    };
  },
  computed: {},
  created() {
    this.id = this.$route.query.id;
    this.getTableData();
  },
  mounted() {},
  methods: {
    async getTableData() {
      const res = await tableDetailsData({ id: this.id });
      console.log(res);
      this.tableData = res.data.orderLines;
      this.tableData1 = res.data;
      this.tableData2 = res.data.customer;
      this.tableData3 = res.data.address;
    },
  },
};
</script>
<style scoped>
.back {
  margin-bottom: 30px;
  color: #69b5bf;
}
.back a:hover {
  text-decoration: underline;
}
.price {
  font-size: 18px;
  color: red;
}
.bottom {
  margin-top: 50px;
  display: flex;
}
.box-card {
  margin-right: 20px;
}
.total span {
  color: red;
  font-size: 18px;
}
</style>
